<html>
<title>动态组件</title>

<head>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div class="container">
        <button @click="flag='my-hello'">点击渲染my-hello组建</button>
        <button @click="flag='my-world'">点击渲染my-world组建</button>
        <!-- 使用keep-alive可以实现缓存非活动组件，可以保留状态，避免重新渲染，默认每次都会销毁非活动组件进行重新渲染 -->
        <keep-alive>
            <!-- 使用component实现动态组件，在一个位置只渲染一个组件 -->
            <component :is="flag">
                <my-hello></my-hello>
                <my-world></my-world>
            </component>
        </keep-alive>
    </div>

    <script>
        var vm = new Vue({
            data: {
                flag: "my-hello"
            },
            components: {
                'my-hello': {
                    template: '<h3>我是my-hello组件：{{ x }}</h3>',
                    //组件中传入的数据必须用data方法
                    data() {
                        return {
                            x: Math.random()
                        }
                    }
                },
                'my-world': {
                    template: '<h3>我是my-world组件：{{ y }}</h3>',
                    //组件中传入的数据必须用data方法
                    data() {
                        return {
                            y: Math.random()
                        }
                    }
                }
            }
        }).$mount('.container');
    </script>

</body>

</html>